<template>
  <div>
    <!-- 售后回访结果查询-->
    <TopFilter :list="topFilterList" :cols="4" :rows="3" @filterChange="changeHandle" @onCollapse="collapseHandle"></TopFilter>
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'rows'"
      selectionType="single"
      columnsRef="lxjshhfVisitResultQueryTable"
      :onColumnsChange="columns => (this.columns = columns)"
    >
      <template slot="controls">
        <AjaxButton size="small" type="primary" icon="el-icon-download" :click="afterVisitInfoExportData">导出</AjaxButton>
      </template>
    </FilterTable>

    <!--问卷录入-->
    <Drawer :visible.sync="actions.visible" :title="actions.title" destroyOnClose :width="1300" :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <RemindInputs :formData="this.resData" :type.sync="actions.type" @close="closeQuestionNaire"></RemindInputs>
    </Drawer>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { dictionary } from '@/utils/dictMixin';
import { notifyAction, isFormEmpty, findTableItem } from '@/utils';
import { getUserListSelect } from '@/api/customerRepair/rescueManagement/rescueOrder';
import { arrayObjDeWeight } from '@/utils/index';
import RemindInputs from '@/pages/customerRepair/afterSaleVisit/resultEntry/remindInputs.vue'; // 问卷录入
import { getVisitInfo, getAllUser, getQuestionnaireList, getAfterVisitInfoExport } from '@/api/customerRepair/afterSaleVisit/resultEntry';
import { getDealerUser, searchBrand, searchSeries, searchModel, searchApAckAge } from '@/api/customerRepair/customerComplaint/customerComplaintReception';
import { getPinpSelect, getChexSelect, getCheModelSelect } from '@/api/repair/repairReception/customer/brand.js';
import { getAppId } from '@/assets/js/auth';
import { searchRoleByCode } from '@/api/common/empSelect/index';
import dictCode from '@/utils/dictCode';
import { getProvince, getCitys, getDistrict, getRegion } from '@/api/customerRepair/customerInfo/ownerVehicleManagement';
import { exportExcelFile } from '@/utils/index';
import { getWxlxSelect } from '@/api/repair/repairReception/customer';

export default {
  name: 'resultEntry_questionnaireEntry',
  components: {
    RemindInputs
  },
  mixins: [dictionary],
  data() {
    this.BaseTable = null;
    this.type = '';
    this.buttonType = '';
    this.resData = {};
    return {
      topFilterList: this.createTopFilterList(),
      actions: { title: '', type: '', visible: false }, // 问卷录入界面
      questionnaire: false, // 问卷录入
      fetchApi: getVisitInfo,
      empList: [],
      fetchParams: { all: true },
      columns: this.createTableColumns(),
      questionnaireData: {}, // 问卷录入数据
      regionList: [] // 省市区集合
    };
  },
  created() {
    // this.getChiefTechnician();
    // 获取字典值
    this.dictInit();
    // this.getQuestionnaireList();
  },
  mounted() {
    if (getAppId() == 'beijing') {
      this.columns = this.createTableColumnsBeijing();
    } else {
      this.columns = this.createTableColumns();
    }
    this.BaseTable = this.$refs.table.$refs.pageTable;
    this.getEmp();
    this.getBrand();
  },
  methods: {
    createTopFilterList() {
      return [
        {
          type: 'SELECT',
          label: '品牌',
          fieldName: 'brand',
          itemList: []
        },
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'vin'
        },
        {
          type: 'INPUT',
          label: '车牌号',
          fieldName: 'license'
        },
        {
          type: 'SELECT',
          label: '跟踪员',
          fieldName: 'stalker',
          itemList: []
        },
        {
          type: 'RANGE_DATE',
          label: '跟踪日期',
          style: { minWidth: '200px' },
          fieldName: 'trackDateBegin|trackDateEnd',
          valueFormat: 'yyyy-MM-dd'
        },
        {
          type: 'SELECT',
          label: '跟踪状态',
          fieldName: 'trackStatus',
          itemList: this.createDictList('8058', [80581005])
        },
        {
          type: 'SELECT',
          label: '录入人',
          fieldName: 'entered',
          itemList: []
        },
        {
          type: 'RANGE_DATE',
          label: '录入日期',
          style: { minWidth: '200px' },
          fieldName: 'enteredDateBegin|enteredDateEnd',
          valueFormat: 'yyyy-MM-dd'
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 60,
          fixed: 'left',
          render: props => {
            return (
              <div>
                <el-button size="mini" type="text" onClick={() => this.openHandle('detail', props.row)}>
                  明细
                </el-button>
              </div>
            );
          }
        },
        {
          title: 'VIN',
          dataIndex: 'vin',
          width: 150
        },
        {
          title: '车牌号',
          dataIndex: 'license',
          width: 150
        },
        {
          title: '工单号',
          dataIndex: 'roNo',
          width: 150
        },
        {
          title: '开单日期',
          dataIndex: 'roCreateDate',
          width: 150,
          dateFormat: 'yyyy-MM-dd'
        },
        {
          title: '出厂日期',
          dataIndex: 'outMileage',
          width: 150,
          dateFormat: 'yyyy-MM-dd'
        },
        {
          title: '销售日期',
          dataIndex: 'salesDate',
          width: 150,
          dateFormat: 'yyyy-MM-dd'
        },
        {
          title: '是否本公司购车',
          dataIndex: 'isSelfCompany',
          width: 150,
          render: props => {
            return <span>{this.createDictText(props.row.isSelfCompany, '1004')}</span>;
          }
        },
        {
          title: '跟踪日期',
          dataIndex: 'trackDate',
          width: 150,
          dateFormat: 'yyyy-MM-dd'
        },
        {
          title: '跟踪员',
          dataIndex: 'stalker',
          width: 150,
          dictItems: []
        },
        {
          title: '跟踪状态',
          dataIndex: 'trackStatus',
          width: 150,
          render: props => {
            return <span>{this.createDictText(props.row.trackStatus, '8058')}</span>;
          }
        },
        {
          title: '录入人',
          dataIndex: 'entered',
          width: 150,
          dictItems: []
        },
        {
          title: '录入日期',
          dataIndex: 'enteredDate',
          width: 150,
          dateFormat: 'yyyy-MM-dd'
        },

        {
          title: '品牌',
          dataIndex: 'brandName',
          width: 150
        },
        {
          title: '车系',
          dataIndex: 'seriesName',
          width: 150
        },
        {
          title: '车型',
          dataIndex: 'modelName',
          width: 150
        },
        {
          title: '车主',
          dataIndex: 'ownerName',
          width: 150
        },
        {
          title: '车主编号',
          dataIndex: 'ownerNo',
          width: 150
        },
        {
          title: '车主性质',
          dataIndex: 'ownerProperty',
          width: 150,
          render: props => {
            return <span>{this.createDictText(props.row.ownerProperty, '8011')}</span>;
          }
        },
        {
          title: '车主电话',
          dataIndex: 'phone',
          width: 150
        },
        {
          title: '车主手机',
          dataIndex: 'mobile',
          width: 150
        },
        {
          title: '车主地址',
          dataIndex: 'address',
          width: 150
        },
        {
          title: '省份',
          dataIndex: 'province',
          width: 150,
          render: props => {
            return <span>{this.getText('region', props.row.province)}</span>;
          }
        },
        {
          title: '城市',
          dataIndex: 'city',
          width: 150,
          render: props => {
            return <span>{this.getText('region', props.row.city)}</span>;
          }
        },
        {
          title: '区县',
          dataIndex: 'district',
          width: 150,
          render: props => {
            return <span>{this.getText('region', props.row.district)}</span>;
          }
        },
        // {
        //   title: '联系人',
        //   dataIndex: 'CONTACTOR_NAME',
        //   width: 150
        // },
        // {
        //   title: '联系人电话',
        //   dataIndex: 'CONTACTOR_PHONE',
        //   width: 150
        // },
        // {
        //   title: '联系人手机',
        //   dataIndex: 'CONTACTOR_MOBILE',
        //   width: 150
        // },
        {
          title: '送修人',
          dataIndex: 'deliverer',
          width: 150
        },
        {
          title: '送修人性别',
          dataIndex: 'delivererGender',
          width: 150,
          render: props => {
            return <span>{this.createDictText(props.row.delivererGender, '8012')}</span>;
          }
        },
        {
          title: '送修人电话',
          dataIndex: 'delivererPhone',
          width: 150
        },
        {
          title: '送修人手机',
          dataIndex: 'delivererMobile',
          width: 150
        },
        {
          title: '备注',
          dataIndex: 'remark',
          width: 150
        },
        {
          title: '维修类型',
          dataIndex: 'repairTypeCode',
          width: 150,
          dictItems: []
        },
        {
          title: '服务顾问',
          dataIndex: 'serviceAdvisor',
          width: 150,
          dictItems: []
        },
        {
          title: '责任技师',
          dataIndex: 'CHIEF_TECHNICIAN',
          dictItems: [],
          width: 150
        },
        {
          title: '维修技师',
          dataIndex: 'technicianList',
          showOverflowTooltip: true,
          render: props => {
            return <span>{this.tranlate(props.row.technicianList)}</span>;
          },
          width: 150
        }
      ];
    },
    createTableColumnsBeijing() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 60,
          fixed: 'left',
          render: props => {
            return (
              <div>
                <el-button size="mini" type="text" onClick={() => this.openHandle('detail', props.row)}>
                  明细
                </el-button>
              </div>
            );
          }
        },
        {
          title: 'VIN',
          dataIndex: 'vin',
          width: 150
        },
        {
          title: '车牌号',
          dataIndex: 'license',
          width: 150
        },
        {
          title: '工单号',
          dataIndex: 'roNo',
          width: 150
        },
        {
          title: '开单日期',
          dataIndex: 'roCreateDate',
          width: 150,
          dateFormat: 'yyyy-MM-dd'
        },
        {
          title: '出厂日期',
          dataIndex: 'outMileage',
          width: 150,
          dateFormat: 'yyyy-MM-dd'
        },
        {
          title: '销售日期',
          dataIndex: 'salesDate',
          width: 150,
          dateFormat: 'yyyy-MM-dd'
        },
        {
          title: '是否本公司购车',
          dataIndex: 'isSelfCompany',
          width: 150,
          render: props => {
            return <span>{this.createDictText(props.row.isSelfCompany, '1004')}</span>;
          }
        },
        {
          title: '跟踪日期',
          dataIndex: 'trackDate',
          width: 150,
          dateFormat: 'yyyy-MM-dd'
        },
        {
          title: '跟踪员',
          dataIndex: 'stalker',
          width: 150,
          dictItems: []
        },
        {
          title: '跟踪状态',
          dataIndex: 'trackStatus',
          width: 150,
          render: props => {
            return <span>{this.createDictText(props.row.trackStatus, '8058')}</span>;
          }
        },
        {
          title: '录入人',
          dataIndex: 'entered',
          width: 150,
          dictItems: []
        },
        {
          title: '录入日期',
          dataIndex: 'enteredDate',
          width: 150,
          dateFormat: 'yyyy-MM-dd'
        },

        {
          title: '品牌',
          dataIndex: 'brandName',
          width: 150
        },
        {
          title: '车系',
          dataIndex: 'seriesName',
          width: 150
        },
        {
          title: '车型',
          dataIndex: 'modelName',
          width: 150
        },
        {
          title: '车主',
          dataIndex: 'ownerName',
          width: 150
        },
        {
          title: '车主编号',
          dataIndex: 'ownerNo',
          width: 150
        },
        {
          title: '车主性质',
          dataIndex: 'ownerProperty',
          width: 150,
          render: props => {
            return <span>{this.createDictText(props.row.ownerProperty, '8011')}</span>;
          }
        },
        {
          title: '车主电话',
          dataIndex: 'phone',
          width: 150
        },
        {
          title: '车主手机',
          dataIndex: 'mobile',
          width: 150
        },
        {
          title: '车主地址',
          dataIndex: 'address',
          width: 150
        },
        {
          title: '省份',
          dataIndex: 'province',
          width: 150,
          render: props => {
            return <span>{this.getText('region', props.row.province)}</span>;
          }
        },
        {
          title: '城市',
          dataIndex: 'city',
          width: 150,
          render: props => {
            return <span>{this.getText('region', props.row.city)}</span>;
          }
        },
        {
          title: '区县',
          dataIndex: 'district',
          width: 150,
          render: props => {
            return <span>{this.getText('region', props.row.district)}</span>;
          }
        },
        // {
        //   title: '联系人',
        //   dataIndex: 'CONTACTOR_NAME',
        //   width: 150
        // },
        // {
        //   title: '联系人电话',
        //   dataIndex: 'CONTACTOR_PHONE',
        //   width: 150
        // },
        // {
        //   title: '联系人手机',
        //   dataIndex: 'CONTACTOR_MOBILE',
        //   width: 150
        // },
        {
          title: '送修人',
          dataIndex: 'deliverer',
          width: 150
        },
        {
          title: '送修人手机',
          dataIndex: 'delivererMobile',
          width: 150
        },
        {
          title: '备注',
          dataIndex: 'remark',
          width: 150
        },
        {
          title: '维修类型',
          dataIndex: 'repairTypeCode',
          width: 150,
          dictItems: []
        },
        {
          title: '服务顾问',
          dataIndex: 'serviceAdvisor',
          width: 150,
          dictItems: []
        },
        {
          title: '责任技师',
          dataIndex: 'CHIEF_TECHNICIAN',
          dictItems: [],
          width: 150
        },
        {
          title: '维修技师',
          dataIndex: 'technicianList',
          showOverflowTooltip: true,
          render: props => {
            return <span>{this.tranlate(props.row.technicianList)}</span>;
          },
          width: 150
        }
      ];
    },
    changeHandle(val) {
      this.fetchParams = Object.assign({}, val, { all: true, xhrAbort: false });
    },
    // 选中事件
    onRowSelectChange(val) {
      if (!val.length) {
        this.resData = null;
      } else {
        this.resData = val[0];
      }
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },

    // 打开问卷录入窗口
    openHandle(type, val) {
      if (type === 'detail') {
        this.actions = { type: 'show', visible: true, title: '问卷录入' };
        this.resData = val;
      }
    },
    // 关闭问卷录入窗口
    closeQuestionNaire() {
      this.actions = { type: 'show', visible: false, title: '问卷录入' };
    },
    // 售后回访查询导出
    async afterVisitInfoExportData() {
      await getAfterVisitInfoExport(this.fetchParams).then(res => {
        console.log(res);
        exportExcelFile(res.data, '售后回访');
      });
    },
    // 品牌
    async getBrand() {
      const res = await getPinpSelect();
      this.topFilterList.find(item => item.fieldName === 'brand').itemList = res.data.map(x => ({ value: x.brandId, text: x.brandName }));
    },
    // 操作员、录入人
    async getAllUser() {
      const res = await getAllUser();
      console.log('操作员、录入人', res);
      let userListDict = (this.topFilterList.find(item => item.fieldName === 'entered').itemList = res.data.map(x => ({ value: x.userId, text: x.employeeName })));
      let targetTableItems = [findTableItem(this.columns, 'stalker'), findTableItem(this.columns, 'entered'), findTableItem(this.columns, 'serviceAdvisor')];
      targetTableItems.forEach(item => {
        item.dictItems = userListDict;
      });
    },
    // 获取维修类型
    async queryRepairTypeDict() {
      let res = await getWxlxSelect();
      if (res.resultCode == 200) {
        this.repairTypeList = res.data;
        let repairTypeDict = res.data.map(item => ({ text: item.REPAIR_TYPE_NAME, value: item.REPAIR_TYPE_CODE + '' }));
        this.repairTypeDict = repairTypeDict;
        let targetTableItems = [findTableItem(this.columns, 'repairTypeCode')];
        targetTableItems.forEach(item => {
          item.dictItems = repairTypeDict;
        });
      }
    },
    // 获取省
    async getProvine() {
      const allRegion = await getRegion();
      this.regionList = allRegion.data.map(x => ({ value: x.regionId, text: x.regionName }));
    },
    // 省市区翻译
    getText(type, val) {
      if (type === 'region') {
        return this.regionList.find(x => x.value === val) ? this.regionList.find(x => x.value === val).text : '';
      }
    },
    // 指定技师
    async getChiefTechnician() {
      // let roleParm = {
      //   role:dictCode.TECHNICIAN
      // };
      // const res = await searchRoleByCode(roleParm);
      // console.log('指定技师',res);
      // this.topFilterList[6].itemList = res.data.map(x =>({value:x.userId, text:x.employeeName}));
    },
    // 问卷名称下拉框
    async getQuestionnaireList() {
      // const res = await getQuestionnaireList();
      // console.log('问卷名称', res);
      // this.topFilterList.find(item => item.fieldName === 'questionnaireId').itemList = res.data.map(x => ({ value: x.QUESTIONNAIRE_ID, text: x.QUESTIONNAIRE_NAME }));
    },
    // 获取全部员工
    async getEmp() {
      const res = await getDealerUser(this.editComplaintId);
      let data = arrayObjDeWeight(res.data, 'userId');
      this.empList = data.map(x => ({ text: x.employeeName, value: x.userId + '' }));
      // this.columns.find(item => item.dataIndex === 'TRANCER').editItems = empList; // 跟踪员
      // this.columns.find(item => item.dataIndex === 'INPUTER').editItems = empList; // 录入人
      // this.columns.find(item => item.dataIndex === 'SERVICE_MAN').editItems = empList; // 服务专员
      this.columns.find(item => item.dataIndex === 'CHIEF_TECHNICIAN').dictItems = this.empList; // 责任技师
      // this.columns.find(item => item.dataIndex === 'TECHNICIAN_LIST').editItems = empList; // 维修技师
    },
    dictInit() {
      // 获取全部人员
      this.getAllUser();
      // 获取维修类型
      this.queryRepairTypeDict();
      // 获取省
      this.getProvine();
      // 获取客服专员
      this.getServiceList();
    },
    //翻译维修技师
    tranlate(technicianList) {
      let arr = '';
      if (technicianList) {
        let list = technicianList.split(',');
        list = new Set(list);
        list.forEach(x => {
          arr += this.empList.find(y => y.value == x)?this.empList.find(y => y.value == x).text:x + ',';
        });
        arr = arr.substring(0, arr.length - 1);
      }
      return arr;
    },
    // 获取客服专员
    async getServiceList() {
      const res = await getUserListSelect();
      if (res.resultCode === 200) {
        if (res.errMsg) {
          notifyAction(res.errMsg, 'warning');
        } else {
          this.topFilterList.find(item => item.fieldName === 'stalker').itemList = res.data.map(x => ({ value: x.userId, text: x.employeeName }));
        }
      }
    }
  }
};
</script>

<style lang="less" scoped></style>
